<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{common/layout}">

<head>
	<meta charset="UTF-8">
	<title>血糖记录管理系统</title>
	<style scoped lang="less">

	</style>
</head>

<body>
	<div layout:fragment="fragment_body">
		<van-row>
			<van-nav-bar title="个人信息" left-text="返回" left-arrow @click-left="onClickLeft" />
		</van-row>
		<van-row>
			<van-row>
				<van-form @submit="onSave">
					<van-field label="用户名" v-model="accountUser" readonly></van-field>
					<van-field label="昵称" v-model="accountNick" placeholder="请输入昵称"
						:rules="[{ required: true}]"></van-field>
					<van-field label="手机" v-model="accountMobile" placeholder="请输入手机"
						:rules="[{ required: true}]"></van-field>
					<van-field label="密码" v-model="accountPassword" placeholder="密码为空不修改"
						:rules="[{ required: false}]"></van-field>
					<van-field label="头像">
						<template #input>
							<van-uploader v-model="files" max-count="1" accept="image/*" :before-read="beforeRead"
								:after-read="afterRead" :max-size="2000 * 1024" @oversize="onOversize"
								@delete="onDelete"></van-uploader>
						</template>
					</van-field>
					<div style="margin: 16px;float: right;">
						<van-button round type="info" native-type="submit">修改</van-button>
					</div>
				</van-form>
			</van-row>
		</van-row>
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	let vueData = {
		activeMenu: 'my',
		accountUser: '',
		accountNick: '',
		accountMobile: '',
		accountPassword: '',
		accountLogo: '',
		files: []
	}
	let vueComputed = {

	}
	let vueMethods = {
		onClickLeft() {
			window.location.href = '/user/my'
		},
		beforeRead(file) {
			if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
				this.$toast.fail('请上传 jpg/png图片');
				return false;
			}
			return true;
		},
		afterRead(file) {
			let that = this
			var forms = new FormData();
			forms.append('file', file.file)
			axios({
				method: "post",
				url: "/file/upload",
				data: forms,
				headers: {
					"content-type": "multipart/form-data",
				},
			}).then((resp) => {
				if (resp.data.status === 0) {
					that.accountLogo = resp.data.data
					that.$toast.success('已上传');
				} else {
					that.$toast(resp.data.msg);
				}
			}).catch((err) => {
				that.$toast(err.toString());
			});
		},
		onOversize(file) {
			this.$toast.fail('文件不能大于2M');
		},
		onDelete() {
			this.accountLogo = ''
		},
		onSave() {
			let that = this
			if (!that.accountLogo) {
				that.$toast('头像未上传');
				return false
			}
			let data = {
				accountUser: that.accountUser,
				accountNick: that.accountNick,
				accountMobile: that.accountMobile,
				accountPassword: that.accountPassword,
				accountLogo: that.accountLogo,
			}
			postRequst('/user/saveAccount', data).then(function (resp) {
				if (resp.status === 0) {
					that.$toast.success(resp.msg);
				} else {
					that.$toast(resp.msg);
				}
			})
		}

	}
	function vueCreated() {
		let that = this
		setTimeout(function () {
			that.accountUser = that.accountInfo.accountUser
			that.accountNick = that.accountInfo.accountNick
			that.accountMobile = that.accountInfo.accountMobile
			//that.accountPassword = that.accountInfo.accountPassword
			that.accountLogo = that.accountInfo.accountLogo
			that.files.push({url: that.accountInfo.accountLogo, isImage: true})
		}, 100)

	}
</script>

</html>